<template>
    <div id="video-container">

        <div class="video-panel">
            <div class="video-top">
            </div>
            <div class="video-player">
                <video id="media" @click="play" :src="src" preload></video>
            </div>
            <videoBar class="video-bar"
                      :currentTime="video.currentTime"
                      :duration="video.duration"
                      :paused="video.paused"
                      :hasNext="video.hasNext"
                      v-on:play="play"
                      v-on:next="next"
                      v-on:goto="goto"
            ></videoBar>
        </div>

    </div>
</template>

<script>
    'use strict';

    import {baseUtil} from "../../common/js/BaseUtil";
    import videoBar from './v-video-bar';

    export default {
        name: "Player",
        components: {videoBar},
        props: {
            name: {
                type: String,
                default(){
                    return '';
                }
            },
            vid: {
                type: Number,
                default() {
                    return null;
                }
            },
            // src: {
            //     type: String,
            //     default() {
            //         return '';
            //     },
            // }
        },
        data() {
            return {
                baseUtil: baseUtil,
                dataUtil: baseUtil.getDateUtil(),
                baseParam: baseUtil.getBaseData(),

                src: '',

                // 媒体播放器
                media: null,

                video: {
                    currentTime: 0,
                    duration: 0,
                    paused: true,
                    src: '',
                    name: this.name,
                    id: 0,
                    vid: this.vid,
                    hasNext: false
                },
            }
        },
        computed: {},
        methods: {
            /**
             * 获取播放器
             * @returns {HTMLElement}
             */
            getMedia() {
                return document.getElementById("media");
            },
            /**
             * 初始化视频资源
             */
            initVideo(vid = 0) {
                // 获取到media对象
                if(this.media === null) {
                    this.media = this.getMedia();
                }
                // 如果当前视频正在播放
                if(this.media !== null && !this.media.paused) {
                    this.play();
                }
                this.getFileInfo();
                this.getResource(vid, () => {
                    // 获取资源
                    let loop = setInterval(() => {
                        if(this.media.readyState === 4) {
                            // 视频时长初始化
                            this.video.duration = this.media.duration;
                            // 当前时间初始化
                            this.video.currentTime = this.media.currentTime;
                            // 关闭当前获取循环
                            clearInterval(loop);
                        }
                    });
                });

            },
            /**
             * 获取播放信息
             */
            getMediaInfo(media = this.media) {
                if(!media) {
                    console.log("暂无媒体播放器");
                    return;
                }
                console.log('---------------------------------------------');
                console.log('资源地址：' + media.currentSrc);
                console.log(media.networkState);
                console.log('播放位置：' + media.currentTime);
                console.log('播放速度：' + media.playbackRate);
                console.log('时长：' + media.duration);
                console.log('是否暂停：' + media.paused);
                console.log(media.buffered);
                console.log(media.preload);
                console.log('音量：' + media.volume);
                console.log('已经播放的区域：',media.played);
            },
            /**
             * 播放
             */
            play() {
                if(this.media.networkState === 3) {
                    this.$message.error('资源未找到');
                    return;
                }
                if(this.media.paused) {
                    this.media.play();
                    this.loop = setInterval(() => {
                        this.video.currentTime = this.media.currentTime;
                        if(this.media.ended) {
                            if(this.media.loop) {
                                this.$message.warning("5秒后开始重新播放");
                                setTimeout(() => {
                                    this.media.play();
                                }, 5000);
                            }
                            clearInterval(this.loop);
                            this.media.pause();
                            this.media.currentTime = 0;
                        }
                    }, 100);
                }else {
                    clearInterval(this.loop);
                    this.media.pause();
                }
                this.video.paused = this.media.paused;
            },
            /**
             * 播放下一p
             */
            next() {
                this.$emit('next', {});
            },
            /**
             * 进度条跳转
             * @param time
             */
            goto(time) {
                this.media.currentTime = time;
            },
            /**
             * 获取文件信息
             */
            getFileInfo(videoId = this.vid) {
                this.baseUtil.ajaxGet( `/file/getFileById/${videoId}`, {}, function(data) {
                    console.log(data)
                });
            },
            getResource(videoId = this.vid, fn) {
                console.log(videoId);
                if(!videoId) {
                    return;
                }
                // 获取文件（文件流）
                this.baseUtil.ajaxGet(`/file/getFileContentById/${videoId}`, {}, (blob) => {
                    this.src = URL.createObjectURL(blob);
                    fn();
                }, this.baseParam.ResponseType.BLOB);
            }
        },
        created() {

        },
        mounted() {
            // this.getVideo();
            // 初始化资源
            // this.initResource();
            // this.initVideo();
        }
    }

</script>

<style lang="scss" scoped>

    @import '../../common/css/theme.sass';
    // 进度条宽度
    $barWidth: 98% 100%;
    // 进度条高度
    $barHeight: 2px 4px;
    // 0.1s的匀速动画
    $linearAnimation: linear 0.1s;

    #video-container{
        /*margin: 0 auto;*/
        width: 100%;
        min-width: 960px;
        /*max-width: 50%;*/
        /*margin: 0 auto;*/
        overflow: hidden;

        div.video-panel{
            position: relative;
            width: 100%;
            background-color: black;

            &>div.video-top{

            }

            &>div.video-player{
                margin: 0 1%;
                width: nth($barWidth, 1);
                padding: 45px 0 65px;
                video{
                    width: 100%;
                }
            }

            &>div.video-bar{
                position: absolute;
                bottom: -55px;
                width: 100%;
                transition: bottom linear 0.2s, width linear 0.2s;

            }

            &:hover {
                div.video-bar{
                    bottom: 0;
                }
            }

        }
    }

</style>
